<template>
  <div>
    <HeaderTop :enable-shadow="true" />

    <!--上半部分-->
    <el-row>
      <el-col :span="24">
        <div class="">
          <!-- 背景图 -->
          <ALImage
                  class=""
                  :src="imageUrl"
                  fit="cover">
          </ALImage>

          <el-row>
            <el-col :span="2">
              <pre> </pre>
            </el-col>
            <el-col :span="20">
              <!-- 头像与昵称 -->
              <div class="al-flex-justify-space-between">
                <div class="al-box-pretty al-width-50 al-position-rela">

                  <!--修改信息按钮-->
                  <DisplayUserInfoComponent />
                </div>

                <div class="al-box-pretty al-width-50 al-flex-container-center-vh show-box-bg">
                  <CountInfoComponent
                          class="al-width-100"/>
                </div>
              </div>
            </el-col>
            <el-col :span="2">
              <pre> </pre>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>


    <!-- 下半部分-->

    <div>
      <el-row>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="20">
          <el-menu
                  mode="horizontal"
                  default-active="1"
                  class="al-flex-justify-space-between al-box-pretty-no-bottom"
                  @select="handleSelect">
            <el-menu-item v-for="(item, index) in menuItemData"
                          :index="item.index"
                          :key="index"
                          class="">
              <div>
                <i :class="item.icon"></i>
                <span slot="title">{{item.text}}</span>
              </div>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>

      <el-row class="al-overflow-scroll-hide-bar al-m-left-10px al-m-right-10px ">
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="20" class="al-bg-color-white">

          <!--我的约拍-->
          <div v-if="this.menuSelect == 1" class="">
            <MyAppointment/>
          </div>


          <!-- 我的作品 -->
          <div v-if="this.menuSelect == 2">
            <MyWorks/>
          </div>


          <!-- 相册 -->
          <div v-else-if="this.menuSelect == 3">
            <MyAlbum/>
          </div>

          <div v-else-if="this.menuSelect == 4">
            <MyScheduling/>
          </div>
        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>
    </div>


    <ALFooter></ALFooter>
  </div>
</template>


<script>
  import ALImage from "@/components/public/ALImage";
  import ALFooter from "@/components/public/ALFooter";

  import MyAppointment from "./component/MyAppointment";
  import MyWorks from "./component/MyWorks";
  import MyAlbum from "./component/MyAlbum";
  import MyScheduling from "./component/MyScheduling";
  import {getTimeFormat} from "../../util/time/TimeUtils";
  import HeaderTop from "../../components/public/HeaderTop";
  import CountInfoComponent from "./component/CountInfoComponent";
  import {request} from "../../util/network/request";
  import DisplayUserInfoComponent from "./component/DisplayUserInfoComponent";
  export default {
    components: {
      DisplayUserInfoComponent,
      CountInfoComponent,
      HeaderTop,
      MyScheduling,
      MyAlbum,
      MyWorks,
      MyAppointment,
      ALFooter,
      ALImage
    },

    props: {
      uid: String
    },

    data() {
      return {
        isDisabled: true,
        drawer: false,
        direction: 'rtl',
        activeName: 'first',
        imageUrl: 'https://cdn-isux.qq.com/upload/detail/f57Y2wEryDwjWmTr2BypYaCA6CgSKjknAJtGRIR4FcR.jpeg',
        userInfo: this.$store.state.storeUserInfo,
        menuSelect: 1,
        menuItemData: [
          {
            text: "约拍",
            index: 1,
            icon: 'el-icon-camera'
          },
          {
            text: "作品",
            index: 2,
            icon: 'el-icon-document'
          },
          {
            text: "相册",
            index: 3,
            icon: 'el-icon-picture-outline-round'
          },
          {
            text: "排期",
            index: 4,
            icon: 'el-icon-date'
          },
        ],
        countData: {
          appointment: 0,
          works: 0,
          album: 0
        },
      }
    },
    created() {

    },
    mounted() {
      let time = getTimeFormat("2020-03-14 12:30:12");
      console.log(time);
    },
    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

      //处理菜单栏选中的事件
      handleSelect(index, indexPath) {
        console.log(index, indexPath);
        this.menuSelect = index;
      },

    },

  }
</script>


<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    box-sizing: border-box;
  }


  li.el-menu-item {
    width: 100%;
    display: flex;
    justify-content: center;
  }

</style>
